<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件委托</title>
</head>

<body>
  <ul id="box">
    <li>点我变色</li>
    <li>点我变色</li>
    <li>点我变色</li>
    <li>点我变色</li>
    <li>点我变色</li>
    <li>点我变色</li>
    <li>点我变色</li>
    <li>点我变色</li>
    <li>点我变色</li>
    <li>点我变色</li>
  </ul>

  <script>
    // 题目：利用事件委托的方法，给一个无序列表的列表项添加点击更改背景色事件。简单说明思路。
    // 思路：利用事件委托，把li标签的点击事件委托给父元素，这里采用排他思想，当点击的时候把所有li的背景设为默认，再把我们点击的元素的背景高亮

    //获取外层盒子ul标签
    var box = document.getElementById('box'),
      //获取box内部全部li标签
      lis = box.children;

    //事件委托，给外部box注册点击事件，调用heightLight函数
    box.addEventListener('click', heightLight);

    //box点击事件函数，获取真正的事件触发源，利用排他思想，先把全部li标签背景恢复默认，然后高亮点击的元素
    //参数：事件对象
    function heightLight(e) {
      //兼容写法
      var e = e || window.event,
        me = e.target || e.srcElement;
      // 调用恢复默认函数，把全部li标签背景恢复默认
      huifu();
      //高亮自己
      me.style.backgroundColor = '#ff0';
    }

    // 功能：把所有li标签恢复默认背景
    function huifu() {
      //循环遍历数组，把每一个元素背景色恢复默认
      for (let i = 0; i < lis.length; i++) {
        lis[i].style.backgroundColor = '';
      }
    }
  </script>
</body>

</html>